<template>
  <view>
    <u-swiper :list="swiperList" @change="e => currentNum = e.current"
      :indicator="indicator" :indicatorMode="indicatorMode" :circular="circular"
      :keyName="keyName" :interval="interval" :indicatorActiveColor="indicatorActiveColor"
      :autoplay="autoplay" :current="current" :previousMargin="previousMargin"
      :radius="radius" :nextMargin="nextMargin" :height="height" :showTitle="showTitle"
      :indicatorInactiveColor="indicatorInactiveColor" @click="seiperItemClick">
      <view slot="indicator" class="indicator-num" v-if="isCustom">
        <text
          class="indicator-num__text">{{ currentNum + 1 }}/{{ swiperList.length }}</text>
      </view>
    </u-swiper>
  </view>
</template>

<script>
  import props from './props.js'
  export default {
    name: "WebSwiper",
    mixins: [ props ],
    data() {
      return {
        currentNum: 0
      };
    },
    methods: {
      seiperItemClick( index ) {
        // 将 点击 的 轮播索引 抛出去 (根据索引查找对应的数据)
        this.$emit( 'swiperClickHandler', index )
      }
    }
  }
</script>

<style lang="scss">
  .indicator-num {
    padding: 2px 0;
    background-color: rgba(0, 0, 0, 0.35);
    border-radius: 100px;
    width: 35px;
    @include flex;
    justify-content: center;

    &__text {
      color: #FFFFFF;
      font-size: 12px;
    }
  }
</style>